<script setup>
import {RouterView} from 'vue-router'
import {computed, ref} from "vue";
import router from "@/router";
import {Search, User} from "@element-plus/icons-vue";
import {ElLoading, ElMessage} from "element-plus";
import axios from "axios";

let logined = ref(false);
let user = ref();
let search = ref();
let searchRef = ref();
if (localStorage.getItem("user") == null) {
  router.replace("/login");
} else {
  logined.value = true;
  user.value = localStorage.getItem("user");
}
const headers = {
  Authorization: localStorage.getItem("auth")
}
const getMenuActive = computed(() => {
  return location.pathname;
})

const btnSaveLoading = ref(false);
const oldPassword = ref("");
const newPassword = ref("");
const newPasswordConfirm =ref("");

const saveChangePwd = () => {
    btnSaveLoading.value = true;
    axios.post("/api/admin/changePassword",
        {
          oldPwd: oldPassword.value,
          newPwd: newPassword.value,
          confirmPwd: newPasswordConfirm.value
        },{headers}).then(response => {
      console.log("保存成功");
      btnSaveLoading.value = false;
      dialogChangePwdVisible.value = false;
      ElMessage({
        message: "修改成功",
        type: 'success',
      })
    }).catch(error => {
      console.log("保存失败", error.response);
      btnSaveLoading.value = false;
      ElMessage({
        message: error.response.data.message,
        type: 'warning',
      })
    })
}
//搜索
const handlerSearch = () => {
  if (search.value == undefined || search.value == "") {
    searchRef.value.focus();
    return;
  }
  ElMessage({
    message: "搜索开始中...",
    grouping: true,
  })
}

//控制修改密码对话框是否显示
const dialogChangePwdVisible = ref(false);


//退出
const handlerLogout = () => {
  localStorage.removeItem("user");
  localStorage.removeItem("auth");
  router.replace("/login");
}

</script>

<template>
  <el-container class="el-container-main" v-if="logined">
    <el-header>
      <div class="left">
        <img src="../assets/logo.png" class="logo"/>
        <span class="title">藏选APP后台管理系统</span>
      </div>
      <div class="right">
        <el-input v-model="search"
                  ref="searchRef"
                  placeholder="搜索">
          <template #append>
            <el-button @click="handlerSearch" :icon="Search"/>
          </template>
        </el-input>
        <span class="username">
          <el-icon>
            <User/>
          </el-icon>
          {{ user }}
        </span>
        <el-button size="small" type="primary" @click="dialogChangePwdVisible = true" round>修改密码</el-button>
        <el-popconfirm title="确认退出吗？"
                       confirm-button-text="是"
                       cancel-button-text="否"
                       @confirm="handlerLogout">
          <template #reference>
            <el-button size="small" type="danger" round>退出登录</el-button>
          </template>
        </el-popconfirm>
      </div>
    </el-header>
    <el-container class="el-container_body">
      <el-aside width="200px">
        <el-menu router
                 :default-active="getMenuActive">
          <el-menu-item index="/user">用户中心</el-menu-item>
          <el-sub-menu index="goods">
            <template #title>
              <span>藏品中心</span>
            </template>
            <el-menu-item index="/goods/">藏品管理</el-menu-item>
            <el-menu-item index="/goods/series">系列管理</el-menu-item>
            <el-menu-item index="/goods/issuer">发行方管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="activity">
            <template #title>
              <span>活动中心</span>
            </template>
            <el-menu-item index="/activity/banner">轮播管理</el-menu-item>
            <el-menu-item index="/activity/article">文章管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="orderform">
            <template #title>
              <span>订单中心</span>
            </template>
            <el-menu-item index="/orderform/firstmarket">一级市场</el-menu-item>
            <el-menu-item index="/orderform/secondmarket">二级市场</el-menu-item>
            <el-menu-item index="/orderform/registration">挂单管理</el-menu-item>
            <el-menu-item index="/orderform/useramountrecord">用户流水</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/log/">用户日志</el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <RouterView/>
      </el-main>
    </el-container>
  </el-container>

  <el-dialog
      v-model="dialogChangePwdVisible"
      title="修改密码"
      width="400" align-center>
    <tr>
      <td>请输入原密码:</td>
      <td>
        <el-input type="password" v-model="oldPassword" style="width:180px" show-password/>
      </td>
    </tr>
    <tr>
      <td>请输入新密码:</td>
      <td>
        <el-input type="password" v-model="newPassword" style="width:180px" show-password/>
      </td>
    </tr>
    <tr>
      <td>请再次输入新密码:</td>
      <td>
        <el-input type="password" v-model="newPasswordConfirm" style="width:180px" show-password/>
      </td>
    </tr>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogChangePwdVisible = false">取消</el-button>
        <el-button @click="saveChangePwd" type="primary" :loading="btnSaveLoading" >保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.el-container-main {
  height: 100%;
  display: flex;
  flex-direction: column;

  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    color: white;
    background: #001529;
    padding: 0 10px;

    .left {
      display: flex;
      align-items: center;
      min-width: 400px;

      .logo {
        width: 40px;
        margin-right: 10px;
      }

      .title {
        font-size: 25px;
      }
    }

    .right {
      display: flex;
      align-items: center;
      min-width: 600px;

      .username {
        font-size: 16px;
        width: 160px;
        margin-left: 30px;
      }

      .el-button--small.is-round {
        padding: 13px 11px;
      }
    }
  }

  .el-container_body {
    flex: 1;

    .el-aside {
      border-right: solid 1px var(--el-menu-border-color);

      .el-menu {
        border-right: none;

        a {
          width: 100%;
          color: var(--el-menu-text-color);
          text-decoration: none;
        }

        .el-sub-menu__title {
          height: 47px;
        }

        .el-menu-item {
          height: 47px;

          .is-active {
            color: white;
            background: #409eff;
          }
        }

        .el-menu-item.is-active {
          color: white;
          background: #409eff;
        }
      }
    }

    .el-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 10px;
      min-width: 800px;

      .el-breadcrumb {
        padding: 7px 0 16px 0;
        margin-bottom: 10px;
        border-bottom: solid 1px var(--el-border-color);
      }

      .view {
        flex: 1 1 auto;
        height: 0;

        .vHead {
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;
        }
      }
    }
  }
}

.el-breadcrumb__item {
  .is-link {
    font-weight: normal !important;
  }
}

.el-breadcrumb__item:last-child {
  .el-breadcrumb__inner {
    font-weight: bold !important;
    color: #2a87e5;
  }
}

.el-table {
  .cell {
    padding-top: 2px;
    padding-bottom: 2px;
  }
}

.el-dialog__body {
  padding: 10px var(--el-dialog-padding-primary);
  line-height: 2.5;
}

.el-dialog__title {
  font-size: 16px;
}

.el-divider--horizontal {
  margin: 10px 0 !important;
}

.el-pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

</style>
